<template>
  <el-container>
    <!-- 侧边栏 -->
    <el-aside width="200px">
      <!-- logo部分 -->
      <div class="logo">
        <img src="../img/logo3.png" alt="" />
      </div>
      <!-- 侧边栏 -->
      <div class="sideBar">
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          :router="true"
          @select="handleSelect"
        >
          <el-menu-item index="/dataStatistics">
            <i class="el-icon-pie-chart"></i>
            <span slot="title">数据统计</span>
          </el-menu-item>
          <el-menu-item index="/expressManagement">
            <i class="el-icon-edit-outline"></i>
            <span slot="title">快递入库信息</span>
          </el-menu-item>
          <el-menu-item index="/repository">
            <i class="el-icon-document"></i>
            <span slot="title">仓位管理</span>
          </el-menu-item>
          <el-menu-item index="/toExpress">
            <i class="el-icon-suitcase-1"></i>
            <span slot="title">寄件信息</span>
          </el-menu-item>
          <el-menu-item index="/feedback">
            <i class="el-icon-warning-outline"></i>
            <span slot="title">快递信息反馈</span>
          </el-menu-item>
          <el-menu-item index="/announcement">
            <i class="el-icon-bell"></i>
            <span slot="title">公告发布</span>
          </el-menu-item>
          <el-menu-item index="/account">
            <i class="el-icon-user"></i>
            <span slot="title">账户管理</span>
          </el-menu-item>
        </el-menu>
      </div>
    </el-aside>
    <el-container>
      <!-- 头部 -->
      <el-header>
        <div class="accountRegion">
          <!-- 退出登录区域 -->
          <el-dropdown trigger="click" @command="handleExitLogin">
            <span class="el-dropdown-link">
              {{ userName}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-circle-close" command="1"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
          <!-- 头像 -->
          <el-avatar
            size="large"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          ></el-avatar>
        </div>
      </el-header>
      <el-main>
        <!-- Router -->
        <router-view class="routerView"></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import axios from 'axios';
export default {
  name: "Index",
  data() {
    return {
      userName:'',
    };
  },
  methods: {
    handleSelect(data) {
      this.$router.push({ path: data });
    },
    // 退出登录
    async handleExitLogin(command){
      if (command === '1') {
        const { data : res} = await axios({
          method:'GET',
          url:'/api/admin/exitLogin',
        })
        
        if(res.code == 200) {
          localStorage.removeItem('token');
          this.$message.info("您已退出登录");
          setTimeout(() => {
            this.$router.push({
            path:'/login'
          })
          }, 1000);
        }
      }

    }
  },
  created() {
    if (localStorage.getItem("userName") != null){
      this.userName = localStorage.getItem("userName",this.userName);
    }else {
      // 显示用户名字
      this.userName = this.$route.query.userName;
      // 存储名字
      localStorage.setItem("userName",this.userName);
    }    
  },
};
</script>

<style>
.el-container {
  animation-name: fadeInUp;
  animation-duration: 1s;
  height: 100%;
}
.routerView {
   animation-name: fadeIn; 
  animation-duration: 1.2s; 
}
/* header栏 */
.el-header {
  position: relative !important;
  height: 100px !important;
  background-color: #f7f8fd;
  color: #333;
  line-height: 100px;
  border-bottom: 1px solid #f4f4f4;
  /* 设置阴影 */
  box-shadow: 3.4px 3.2px 14.3px rgba(0, 0, 0, 0.05),
    11.4px 10.7px 48px rgba(0, 0, 0, 0.03);
  z-index: 888;
}
/* aside区 */
.el-aside {
  text-align: center;
  color: #333;
  background-color: #ffffff !important;
}
/* 设置logo */
/* logo图片 */
.logo {
  width: 200px;
  height: 180px;
  margin: 0 auto;
}
.el-aside .logo img {
  height: 100%;
  width: 100%;
}
/*侧边栏 */
.sideBar {
  width: 100%;
  height: 70%;
}
.el-menu {
  background-color: #ffffff !important;
  border-right: none !important;
}
/*  设置侧边栏样式 */
/* 每项选中或者聚焦的时候CSS */
.el-menu-item:focus,
.el-menu-item:hover {
  border-radius: 20px;
  width: 200px;
  margin: 0 auto;
  background-color: #eeeeee !important;
  text-align: start;
  color: #333;
}
.el-menu-item:focus {
  background-color: #ffffff !important;
}
.el-menu-item.is-active {
  color: #ff84b4 !important;
  background-color: #ffffff;
}
.el-menu-item {
  width: 200px;
  margin: 0 auto;
  border-radius: 20px;
  background-color: #ffffff;
  text-align: start;
  padding-left: 43px !important;
}
/* 下拉菜单 */
/* 字体显示颜色 */
.el-dropdown-link {
  cursor: pointer;
  color: #333;
}
/* 图标大小 */
.el-icon-arrow-down {
  font-size: 12px;
}
/* 覆盖行高 */
.el-dropdown {
  line-height: 15px;
}
/* 修改默认样式 */
.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
  color: #ff84b4 !important;
  background-color: #eeeeee !important;
}
/* 修改header信息区布局 */
.accountRegion {
  position: absolute;
  display: flex;
  justify-content: flex-end;
  top: 50%;
  right: 0%;
  transform: translate(-50%, -50%);
}
.accountRegion .el-dropdown {
  line-height: 45px;
}
/* 账户选中改色 */
.el-dropdown .el-dropdown-selfdefine:focus:active,
.el-dropdown .el-dropdown-selfdefine:focus:not(.focusing) {
  color: #ff84b4 !important;
}
/* 布局默认样式 */

.el-main {
  background-color: #f7f8fd;
  color: #333;
  text-align: center;
  padding: 0px !important;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>